<template>
  <el-card header="个人信息">
  <el-descriptions :column="2" border>
    <el-descriptions-item label="手机号">
      {{vipInfo.phone}}
    </el-descriptions-item>
    <el-descriptions-item label="头像">
      <el-upload class="avatar-upload" :action="uploadUrl" :show-file-list="false" :headers="uploadHeader" :on-success="onSuccess" :before-upload="beforeUpload">
        <img :src="baseImage+vipInfo.avatar" alt="" class="avatar">
      </el-upload>
    </el-descriptions-item>
    <el-descriptions-item label="昵称">
      <el-input v-model="vipInfo.name" placeholder="请输入昵称" clearable></el-input>
    </el-descriptions-item>
    <el-descriptions-item label="性别">
      <el-radio-group v-model="vipInfo.sex">
        <el-radio :label="1">男</el-radio>
        <el-radio :label="2">女</el-radio>
        <el-radio :label="3">未选择</el-radio>
      </el-radio-group>
    </el-descriptions-item>
    <el-descriptions-item label="出生日期">
      <el-date-picker style="width: 100%" v-model="vipInfo.birthday" type="date" placeholder="请选择日期" value-format="yyyy-MM-dd" clearable/>
    </el-descriptions-item>
    <el-descriptions-item label="微信账号">
      <el-tag type="success" v-if="vipInfo.openId">已绑定</el-tag>
      <el-tag type="danger" v-else>未绑定</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="个性签名">
      <el-input v-model="vipInfo.profile" type="textarea" :rows="3" maxlength="150" show-word-limit/>
    </el-descriptions-item>
  </el-descriptions>
    <div style="text-align: center;margin-top: 10px">
      <el-button type="primary" @click="submit">保存信息</el-button>
      <el-button type="warning" @click="logout">退出登录</el-button>
      <el-button type="text" @click="delVip">注销账号</el-button>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'VipInfo',
  data () {
    return {
      vipInfo: {},
      baseImage: process.env.VUE_APP_URL,
      uploadUrl: process.env.VUE_APP_URL + 'api/upload',
      uploadHeader: {
        apiToken: this.$cookies.get('api-token')
      }
    }
  },
  methods: {
    beforeUpload (file) {
      const isImage = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/gif'
      if (!isImage) {
        this.$message.error('请上传图片，格式支持：jpg,jpeg,png,gif')
      }
      const isLt20M = (file.size / 1024 / 1024) < 20
      if (!isLt20M) {
        this.$message.error('图片大小不能超过20MB')
      }
      return isImage && isLt20M
    },
    onSuccess (res) {
      if (res.code === 200) {
        this.vipInfo.avatar = res.data
        this.submit()
      } else {
        this.$message.error(res.msg)
      }
    },
    getLoginInfo () {
      this.$http.get('api/vip/info').then(data => {
        if (data) {
          this.vipInfo = { ...data }
        }
      }).catch(() => {})
    },
    submit () {
      this.$http.post('api/vip/save', this.vipInfo).then(() => {
        this.$message.success('更新成功')
      }).catch(() => {})
    },
    logout () {
      this.$confirm('确定退出登录吗?').then(() => {
        this.$http.get('api/vip/logout', { type: 1 }).then(() => {
          this.$router.replace('/')
          sessionStorage.removeItem('vipInfo')
          this.$cookies.remove('api-token')
        }).catch(() => {})
      }).catch(() => {})
    },
    delVip () {
      this.$confirm('确定注销吗?').then(() => {
        this.$confirm('注销后所有数据不可找回！确定注销吗？').then(() => {
          this.$http.delete('api/vip/delete').then(() => {
            this.$message.success('注销完成')
            this.$router.replace('/')
            sessionStorage.removeItem('vipInfo')
            this.$cookies.remove('api-token')
          })
        }).catch(() => {})
      }).catch(() => {})
    }
  },
  created () {
    this.getLoginInfo()
  }
}
</script>

<style scoped lang="scss">
.avatar{
  width: 178px;
  height: 178px;
  display: block;
  border-radius: 50%;
}
</style>
